<template>
  <div>
    <div style="display: flex; flex-direction: row; flex-wrap: wrap">
      <div class="ccccccBox">
        <div style="position: relative">
          储蓄卡
          <div style="position: absolute; top: -5px; right: 0px">
            <i
              class="el-icon-bank-card buttonStyle"
              style="font-size: 20px"
              @click="draw_card = true"
            ></i>
          </div>
        </div>
        <div>
          <div class="form">
            <input
              v-model="myMoney.card"
              class="input"
              placeholder="Value"
              required=""
              type="number"
            />
          </div>
        </div>
      </div>
      <div class="ccccccBox">
        <div style="color: #108ee9">支付宝</div>
        <div class="form">
          <input
            v-model="myMoney.paypal"
            class="input"
            placeholder="Value"
            required=""
            type="number"
          />
        </div>
      </div>
      <div class="ccccccBox">
        <div style="color: #7ecc09">微信余额</div>
        <div class="form">
          <input
            v-model="myMoney.weichat"
            class="input"
            placeholder="Value"
            required=""
            type="number"
          />
        </div>
      </div>
      <div class="ccccccBox">
        <div style="color: #a8a8a8"><i class="el-icon-money"></i> 现金</div>
        <div class="form">
          <input
            v-model="myMoney.cash"
            class="input"
            placeholder="Value"
            required=""
            type="number"
          />
        </div>
      </div>
      <div class="ccccccBox" style="width: 170px">
        <div>总资产</div>
        <div>
          {{ "￥" + moneyFormatter(sumAll("总资产")) }}
        </div>
      </div>
      <div
        v-for="(item, index) in myMoney.fixed"
        class="ccccccBox icon_hover"
        style="padding-top: 2px; position: relative"
      >
        <i
          style=""
          class="el-icon-delete-solid icon_svg"
          @click="fixed_delete(index)"
        >
        </i>
        <div>
          <div class="form">
            <input
              v-model="item.name"
              class="input_word"
              placeholder="Title"
              required=""
              type="text"
            />
          </div>
        </div>
        <div>
          <div class="form">
            <input
              v-model="item.value"
              class="input"
              placeholder="value"
              required=""
              type="number"
            />
          </div>
        </div>
      </div>
      <div
        class="ccccccBox buttonStyle"
        style="width: 33px"
        @click="fixed_add()"
      >
        <span style="font-size: 20px; font-weight: 600">+</span>
      </div>
      <div class="ccccccBox">
        <div>修正值和</div>
        <div>
          {{ "￥" + moneyFormatter(sumAll("修正值和")) }}
        </div>
      </div>
      <div class="ccccccBox" style="width: 170px">
        <div>修正资产</div>
        <div>
          {{ "￥" + moneyFormatter(sumAll("修正资产")) }}
        </div>
      </div>

      <div class="ccccccBox" style="width: 170px">
        <div><i class="el-icon-house"></i> 住房公积金</div>
        <div class="form">
          <input
            v-model="myMoney.zfgjj"
            class="input"
            placeholder="Value"
            required=""
            type="number"
          />
        </div>
      </div>
      <div class="ccccccBox" style="width: 170px">
        <div>医保账户余额</div>
        <div class="form">
          <input
            v-model="myMoney.yb"
            class="input"
            placeholder="Value"
            required=""
            type="number"
          />
        </div>
      </div>
      <div class="ccccccBox" style="width: 170px">
        <div><i class="el-icon-map-location"></i> 小荷包</div>
        <div class="form">
          <input
            v-model="myMoney.xhb"
            class="input"
            placeholder="Value"
            required=""
            type="number"
          />
        </div>
      </div>
    </div>
    <div style="background-color: #217187; height: 50px; display: flex">
      <div style="margin: auto; margin-left: 15px; margin-right: 0px">
        <el-date-picker
          value-format="yyyy-MM-dd"
          size="mini"
          style="margin-left: auto; margin-right: 10px"
          v-model="timeValue"
          type="datetime"
          placeholder="选择计算开始时间"
          align="right"
          :picker-options="pickerOptions"
          @change="calculate()"
        >
        </el-date-picker>
      </div>
      <!-- <div style="cursor: pointer;font-weight: 600;text-decoration: underline;margin: auto;margin-left: 0;"
				class="buttonStyle">
				单击此处生成*</div> -->
      <el-button
        type="text"
        class="buttonStyle"
        icon="el-icon-magic-stick"
        style="margin-left: 2px; font-weight: 600; color: white"
        @click="calculate()"
        >单击此处生成</el-button
      >
      <div style="margin: auto; margin-right: 20px">
        <el-switch
          v-model="compareWithLastMonth"
          active-text="对比上月"
          inactive-text=""
        >
        </el-switch>
        <el-button
          type="text"
          class="buttonStyle"
          style="margin-left: 10px; color: white"
          @click="draw_hy = true"
          >会员与订阅</el-button
        >
        <el-button
          type="text"
          class="buttonStyle"
          style="margin-left: 10px; color: white"
          @click="draw_zfbt = true"
          >住房补贴</el-button
        >
        <el-button
          type="text"
          class="buttonStyle"
          icon="el-icon-tickets"
          style="margin-left: 10px; color: white"
          @click="draw_payList = true"
          >我的账单</el-button
        >
      </div>
    </div>
    <div
      style="
        border: 1px solid #cccccc;
        border-radius: 2px;
        margin-top: 8px;
        height: 500px;
      "
    >
      <el-calendar>
        <template slot="dateCell" slot-scope="{ date, data }">
          <div style="width: 100%; height: 100%">
            <div
              :class="[data.day == timeValue ? 'redStyle' : 'spandate']"
              style="text-align: right; font-weight: 600"
            >
              {{ data.day.split("-").slice(1).join("-") }}
              <span v-if="data.day == timeValue"
                >👈{{ "￥" + moneyFormatter(sumAll("修正资产")) }}
              </span>
            </div>
            <div v-for="item in list" style="margin-top: 20px; width: 100%">
              <!-- :style="{ 'color': ((item.items.length > 0) ? 'red' : 'blue') }" -->
              <div
                style="width: 100%; position: relative; margin-top: -20px"
                v-if="data.day == item.present.slice(0, 10)"
              >
                <div v-if="compareWithLastMonth" class="parent">
                  <div class="div1">
                    ¥
                    <div class="flex_marginLeftAuto">
                      {{
                        toFixedFun(
                          item.lastMonth.lastMoney + item.lastMonth.SumMoney
                        )
                      }}
                    </div>
                  </div>
                  <div class="div2">
                    ¥
                    <div class="flex_marginLeftAuto">
                      <el-popover placement="right" width="520" trigger="click">
                        <div>
                          <el-table
                            :header-cell-style="table_Header_Style"
                            :cell-style="cell_Style"
                            :data="item.lastMonth.items"
                            stripe
                            border
                            style="width: 100%"
                          >
                            <el-table-column
                              prop="name"
                              label="项目"
                              min-width="170"
                            >
                            </el-table-column>
                            <el-table-column
                              prop="costmoney"
                              label="总价"
                              width="130"
                              align="right"
                            >
                              <template slot-scope="scope">
                                <span v-if="scope.row.costmoney == null">
                                  {{ "-" }}
                                </span>
                                <span v-else>
                                  {{ moneyFormatter(scope.row.costmoney) }}
                                </span>
                              </template>
                            </el-table-column>
                            <el-table-column
                              prop="each_issue"
                              label="每期需还"
                              width="130"
                              align="right"
                            >
                              <template slot-scope="scope">
                                <span
                                  v-if="scope.row.each_issue > 0"
                                  style="color: red"
                                >
                                  {{ moneyFormatter(-scope.row.each_issue) }}
                                </span>
                                <span v-else style="color: green">
                                  {{ moneyFormatter(-scope.row.each_issue) }}
                                </span>
                              </template>
                            </el-table-column>
                            <el-table-column
                              prop="presentQS"
                              label="当前期数"
                              width="90"
                              align="center"
                            >
                              <template slot-scope="scope">
                                <span v-if="!(scope.row.costmoney == null)">
                                  <i
                                    class="el-icon-s-flag"
                                    style="color: blue"
                                  ></i>
                                  {{ scope.row.presentQS }}
                                </span>
                                <span v-else> - </span>
                              </template>
                            </el-table-column>
                          </el-table>
                        </div>
                        <div slot="reference">
                          <div
                            class="each_issue_hover"
                            v-if="item.SumMoney > 0"
                            style="color: red; margin-left: auto"
                          >
                            {{ toFixedFun(-item.lastMonth.SumMoney) }}
                          </div>
                          <div
                            class="each_issue_hover"
                            v-if="item.SumMoney < 0"
                            style="color: green; margin-left: auto"
                          >
                            {{ toFixedFun(-item.lastMonth.SumMoney) }}
                          </div>
                        </div>
                      </el-popover>
                    </div>
                  </div>
                  <div class="div3">
                    ¥
                    <div class="flex_marginLeftAuto">
                      {{ toFixedFun(item.lastMonth.lastMoney) }}
                    </div>
                  </div>
                  <div class="div4">
                    ¥
                    <div class="flex_marginLeftAuto">
                      {{ (item.lastMoney + item.SumMoney).toFixed(2) }}
                    </div>
                  </div>
                  <div class="div5">
                    ¥
                    <div class="flex_marginLeftAuto">
                      <el-popover placement="right" width="520" trigger="click">
                        <div>
                          <el-table
                            :header-cell-style="table_Header_Style"
                            :cell-style="cell_Style"
                            :data="item.items"
                            stripe
                            border
                            style="width: 100%"
                          >
                            <el-table-column
                              prop="name"
                              label="项目"
                              min-width="170"
                            >
                            </el-table-column>
                            <el-table-column
                              prop="costmoney"
                              label="总价"
                              width="130"
                              align="right"
                            >
                              <template slot-scope="scope">
                                <span v-if="scope.row.costmoney == null">
                                  {{ "-" }}
                                </span>
                                <span v-else>
                                  {{ moneyFormatter(scope.row.costmoney) }}
                                </span>
                              </template>
                            </el-table-column>
                            <el-table-column
                              prop="each_issue"
                              label="每期需还"
                              width="130"
                              align="right"
                            >
                              <template slot-scope="scope">
                                <span
                                  v-if="scope.row.each_issue > 0"
                                  style="color: red"
                                >
                                  {{ moneyFormatter(-scope.row.each_issue) }}
                                </span>
                                <span v-else style="color: green">
                                  {{ moneyFormatter(-scope.row.each_issue) }}
                                </span>
                              </template>
                            </el-table-column>
                            <el-table-column
                              prop="presentQS"
                              label="当前期数"
                              width="90"
                              align="center"
                            >
                              <template slot-scope="scope">
                                <span v-if="!(scope.row.costmoney == null)">
                                  <i
                                    class="el-icon-s-flag"
                                    style="color: blue"
                                  ></i>
                                  {{ scope.row.presentQS }}
                                </span>
                                <span v-else> - </span>
                              </template>
                            </el-table-column>

                            <el-table-column
                              prop="belong"
                              label="来源"
                              min-width="170"
                            >
                            </el-table-column>
                          </el-table>
                        </div>
                        <div slot="reference">
                          <div
                            class="each_issue_hover"
                            v-if="item.SumMoney > 0"
                            style="color: red; margin-left: auto"
                          >
                            {{ (-item.SumMoney).toFixed(2) }}
                          </div>
                          <div
                            class="each_issue_hover"
                            v-else
                            style="color: green; margin-left: auto"
                          >
                            {{ (-item.SumMoney).toFixed(2) }}
                          </div>
                        </div>
                      </el-popover>
                    </div>
                  </div>
                  <div class="div6">
                    ¥
                    <div class="flex_marginLeftAuto">
                      {{ item.lastMoney.toFixed(2) }}
                    </div>
                  </div>
                </div>
                <div v-if="!compareWithLastMonth" class="parent">
                  <div class="div4">
                    ¥
                    <div class="flex_marginLeftAuto">
                      {{ (item.lastMoney + item.SumMoney).toFixed(2) }}
                    </div>
                  </div>
                  <div class="div5">
                    ¥
                    <div class="flex_marginLeftAuto">
                      <el-popover placement="right" width="520" trigger="click">
                        <div>
                          <el-table
                            :header-cell-style="table_Header_Style"
                            :cell-style="cell_Style"
                            :data="item.items"
                            stripe
                            border
                            style="width: 100%"
                          >
                            <el-table-column
                              prop="name"
                              label="项目"
                              min-width="170"
                            >
                            </el-table-column>
                            <el-table-column
                              prop="costmoney"
                              label="总价"
                              width="130"
                              align="right"
                            >
                              <template slot-scope="scope">
                                <span v-if="scope.row.costmoney == null">
                                  {{ "-" }}
                                </span>
                                <span v-else>
                                  {{ moneyFormatter(scope.row.costmoney) }}
                                </span>
                              </template>
                            </el-table-column>
                            <el-table-column
                              prop="each_issue"
                              label="每期需还"
                              width="130"
                              align="right"
                            >
                              <template slot-scope="scope">
                                <span
                                  v-if="scope.row.each_issue > 0"
                                  style="color: red"
                                >
                                  {{ moneyFormatter(-scope.row.each_issue) }}
                                </span>
                                <span v-else style="color: green">
                                  {{ moneyFormatter(-scope.row.each_issue) }}
                                </span>
                              </template>
                            </el-table-column>
                            <el-table-column
                              prop="presentQS"
                              label="当前期数"
                              width="90"
                              align="center"
                            >
                              <template slot-scope="scope">
                                <span v-if="!(scope.row.costmoney == null)">
                                  <i
                                    class="el-icon-s-flag"
                                    style="color: blue"
                                  ></i>
                                  {{ scope.row.presentQS }}
                                </span>
                                <span v-else> - </span>
                              </template>
                            </el-table-column>

                            <el-table-column
                              prop="belong"
                              label="来源"
                              min-width="170"
                            >
                            </el-table-column>
                          </el-table>
                        </div>
                        <div slot="reference">
                          <div
                            class="each_issue_hover"
                            v-if="item.SumMoney > 0"
                            style="color: red; margin-left: auto"
                          >
                            {{ (-item.SumMoney).toFixed(2) }}
                          </div>
                          <div
                            class="each_issue_hover"
                            v-if="item.SumMoney < 0"
                            style="color: green; margin-left: auto"
                          >
                            {{ (-item.SumMoney).toFixed(2) }}
                          </div>
                        </div>
                      </el-popover>
                    </div>
                  </div>
                  <div class="div6">
                    ¥
                    <div class="flex_marginLeftAuto">
                      {{ item.lastMoney.toFixed(2) }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
      </el-calendar>
    </div>
    <el-drawer
      title="储蓄卡"
      size="640px"
      :visible.sync="draw_card"
      :with-header="false"
    >
      <draw_card v-if="draw_card"></draw_card>
    </el-drawer>

    <el-drawer
      title="会员与订阅"
      size="100%"
      :visible.sync="draw_hy"
      :with-header="false"
    >
      <draw_hy :payListData="tableData_draw" v-if="draw_hy"></draw_hy>
    </el-drawer>
    <el-drawer
      title="我的账单"
      size="100%"
      :visible.sync="draw_payList"
      :with-header="false"
    >
      <draw_payList
        :payListData="tableData_draw"
        v-if="draw_payList"
      ></draw_payList>
    </el-drawer>
    <el-drawer
      title="住房补贴"
      size="50%"
      :visible.sync="draw_zfbt"
      :with-header="false"
    >
      <div
        style="
          height: 40px;
          text-align: center;
          padding: 10px;
          font-weight: 600;
          font-size: 18px;
        "
      >
        未到账金额：$
        {{ didntGetMoney(tableData_zfbt).toFixed(2) }}
      </div>
      <el-table :data="tableData_zfbt">
        <el-table-column
          prop="startTime"
          label="开始时间"
          width="130"
          align="right"
        >
        </el-table-column>
        <el-table-column
          prop="endTime"
          label="截至时间"
          width="130"
          align="right"
        >
        </el-table-column>
        <el-table-column prop="status" label="状态" width="130" align="right">
        </el-table-column>
        <el-table-column
          prop="money"
          label="到账金额"
          width="130"
          align="right"
        >
        </el-table-column>
        <el-table-column
          prop="submitFormDate"
          label="申请日期"
          width="130"
          align="right"
        >
        </el-table-column>
        <el-table-column
          prop="getMoneyDate"
          label="打款日期"
          width="130"
          align="right"
        >
        </el-table-column>
      </el-table>
    </el-drawer>
  </div>
</template>

<script>
import draw_hy from './draw_hy.vue'
import draw_payList from './draw_payList.vue'
import draw_card from './draw_card.vue'
import mixin from '@/mixin/index.js';
export default {
  name: 'app',
  mixins: [mixin],
  components: {
    draw_payList,
    draw_card,
    draw_hy

  },
  created () {
    /* >---- 通过基础值推算增加键值对 ----< */
    let tableData = [...this.Origin_listData]
    for (let i = 0; i < tableData.length; i++) {
      let item = tableData[i]
      tableData[i].each_issue = item.costmoney / item.duration
      tableData[i].endDate = this.addMonth(tableData[i].startDate, tableData[i].duration -
        1) // 2024-06-12调整,12月购买，分12期，应该次年11月是最后还款日，故-1
      for (let x = 0; x < tableData[i].duration; x++) { // 剩余月份计算算法，从1开始，入参为第一期还款日而不是消费日
        let com = this.compareDate(this.getTodayDate(), this.addMonth(tableData[i].startDate, x))
        if ((com == '=') || (com == '>')) { // 默认情况：当日为某期是为已经偿还当日还款
          tableData[i].lastMonth = tableData[i].duration - (x + 1)
          tableData[i].presentQS = x + 1
          tableData[i].lastCost = tableData[i].each_issue * tableData[i].lastMonth
        }
      }
    }
    this.Origin_listData = [...tableData]

    let fixTable = JSON.parse(JSON.stringify(tableData)) // 对象数组深拷贝
    this.tableData_draw = [...fixTable]
    /* >---- 通过基础值推算增加键值对 ----< */

    this.listData = [...tableData]
    this.timeValue = new Date().toISOString().split("T")[0];
    for (let i = 0; i < this.listData.length; i++) { // 计算日期会-1，这里提前处理，将日期+1
      let date = new Date(this.listData[i].startDate); // 增加一天
      date.setDate(date.getDate() + 1);
      this.listData[i].startDate = date.toISOString().substring(0, 10);
    }
    this.calculate()
  },
  methods: {
    didntGetMoney (table) {
      let sum = 0
      for (let i = 0; i < table.length; i++) {
        if (table[i].money == 0) {
          sum = sum + 500
        }
      }
      return sum
    },
    toFixedFun (value) {
      function isNumber (value) {
        return typeof value === 'number' && !isNaN(value);
      }
      if (isNumber(value)) {
        return value.toFixed(2)
      } else {
        return '-'
      }
    },
    sumAll (type) {
      let myMoney = this.myMoney
      let sum1 = this.numAdd(myMoney.card, myMoney.paypal)
      let sum2 = this.numAdd(sum1, myMoney.weichat)
      let sum3 = this.numAdd(sum2, myMoney.cash)
      let table = myMoney.fixed
      let sum4 = 0
      for (let i = 0; i < table.length; i++) {
        sum4 = this.numAdd(sum4, table[i].value)
      }
      if (type == '总资产') {
        return sum3
      } else if (type == '修正资产') {
        return this.numAdd(sum3, sum4)
      } else if (type == '修正值和') {
        return sum4
      }
    },
    returnCardMoney (sum) {
      this.myMoney.card = sum
      this.draw_card = false
    },
    closeDraw () {
      this.draw_payList = false
    },
    closeDraw_hy () {
      this.draw_hy = false
    },
    fixed_delete (index) {
      this.myMoney.fixed.splice(index, 1);
    },
    fixed_add () {
      let checked = this.myMoney.fixed
      for (let i = 0; i < checked.length; i++) {
        if (checked[i].name == '' || checked[i].value == '') {
          this.$message.error({
            message: '请先补充修正值！',
            showClose: true,
          })
          return
        }
      }
      this.myMoney.fixed.push({
        name: '',
        value: ''
      })
    },
    calculate () {
      if (this.timeValue == '') {
        this.$message({
          type: 'warning',
          message: '请先填写指定日期',
          showClose: true,
        })
        return
      } else {
        this.$message({
          showClose: true,
          message: '计算完毕',
          type: 'success',
          showClose: true,
        });
      }
      // 首先根据日期排序，用来依据从过去到未来的方向依次用余额扣除每日还款
      let resultOrigin = this.andLastMoney().sort((a, b) => {
        let dateA = new Date(a.present);
        let dateB = new Date(b.present);
        return dateA - dateB;
      });
      let result = resultOrigin
      //let today = this.timeValue // 选择开始计算的日期
      let today = '2022-11-01'
      result = resultOrigin.filter(obj => obj.present >= today);
      const conutSum = result.reduce((acc, obj) => {
        const existingObj = acc.find(item => item.present === obj.present);
        if (existingObj) {
          existingObj.items.push(obj);
        } else {
          const newObj = {
            present: obj.present,
            items: [obj]
          };
          acc.push(newObj);
        }
        return acc;
      }, []);
      conutSum.forEach(obj => {
        obj.SumMoney = obj.items.reduce((sum, item) => sum + item.each_issue, 0);
      });
      /* 临时数据 */
      let conutSum_B = JSON.parse(JSON.stringify(conutSum)) // Good 😄
      conutSum_B.forEach(obj => {
        myMoney -= obj.SumMoney;
        obj.lastMoney = myMoney;
      });
      /* 临时数据 */

      let myMoney = this.calculateOriginMoney(this.calculateLastMonthCompare(conutSum_B))
      conutSum.forEach(obj => {
        myMoney -= obj.SumMoney;
        obj.lastMoney = myMoney;
      });
      this.list = this.calculateLastMonthCompare(conutSum) // 给每天添加上个月的对比数据
    },
    calculateOriginMoney (list) {
      // 时间区间位为，从第一天到，距离指定日期的最近的日期（右边）
      let middle = 0
      for (let i = 0; i < list.length; i++) {
        if (list[i].present < this.timeValue) { // 计算日期最接近指定日期的消费/收入和
          middle = list[i].SumMoney + middle
          console.log(i, list[i].present)
        }
      }
      console.log('middle', middle)
      return middle + this.sumAll('修正资产')

    },
    calculateLastMonthCompare (data) {
      // function subtractMonth(dateStr) {
      //     // 将日期字符串解析为Date对象
      //     let date = new Date(dateStr);
      //     // 获取当前月份
      //     let month = date.getMonth();
      //     // 设置月份减去1
      //     date.setMonth(month - 1);
      //     // 处理跨年情况
      //     if (date.getMonth() === 11 && month === 0) {
      //         date.setFullYear(date.getFullYear() - 1);
      //     }
      //     // 格式化日期为yyyy-mm-dd字符串
      //     let year = date.getFullYear();
      //     let newMonth = (date.getMonth() + 1).toString().padStart(2, '0');
      //     let day = date.getDate().toString().padStart(2, '0');
      //     return `${year}-${newMonth}-${day}`;
      // }
      // // 示例使用
      // let newDate = subtractMonth("2024-06-01");
      // console.log(newDate);  // 输出"2024-05-01"
      function getLastMonthDate (dateStr) {
        let date = new Date(dateStr);
        let year = date.getFullYear();
        let month = date.getMonth();

        if (month === 0) {
          month = 11;
          year -= 1;
        } else {
          month -= 1;
        }

        // 格式化日期为 yyyy-mm-dd
        let lastMonthDate = new Date(year, month, date.getDate());
        let yyyy = lastMonthDate.getFullYear();
        let mm = String(lastMonthDate.getMonth() + 1).padStart(2, '0');
        let dd = String(lastMonthDate.getDate()).padStart(2, '0');
        return `${yyyy}-${mm}-${dd}`;
      }

      let dateMap = {};
      data.forEach(item => {
        dateMap[item.present] = item;
      });

      // 遍历数据，为每个对象添加 lastMonth 字段
      data.forEach(item => {
        let lastMonthDate = getLastMonthDate(item.present);
        if (dateMap[lastMonthDate]) {
          item.lastMonth = dateMap[lastMonthDate];
        } else {
          item.lastMonth = {
            lastMoney: '-',
            SumMoney: '-',
          }; // 如果上个月的对象不存在，可以设置为 null 或其他值
        }
      });
      console.log('data', data)
      return data
    },
    andLastMoney () {
      function generateDateRange (list) {
        const resultList = [];
        for (let i = 0; i < list.length; i++) {
          const {
            startDate,
            duration,
            name,
            costmoney,
            each_issue
          } = list[i]; // ES6对象解构赋值
          const startDateObj = new Date(startDate);
          let remainingCost = costmoney;
          for (let j = 0; j < duration; j++) {
            const currentDate = new Date(startDateObj.getFullYear(), startDateObj.getMonth() + j,
              startDateObj.getDate());
            const dateString = currentDate.toISOString().split('T')[0];
            const presentQS = j + 1;

            resultList.push({
              name,
              present: dateString,
              presentQS,
              costmoney,
              each_issue
            });
            remainingCost -= each_issue;
          }
        }
        return resultList;
      }
      // 示例数据
      let list = [].concat(this.listData);

      // 调用函数生成日期范围对象数组
      const result = generateDateRange(list);

      // 计算剩余还款额
      result.forEach(obj => {
        obj.lastCost = obj.costmoney - (obj.presentQS * obj.each_issue);
      });
      return result
    },
  },
  data () {
    return {
      tableData_draw: [],
      calendarData: [], // 渲染到日历的数组
      listData: [],
      Origin_listData_old: [
        { // 理想生活状态
          name: '工资',
          costmoney: -(15000 * 36),
          duration: 36,
          startDate: '2024-07-25',
          belong: '-',
        }, {
          name: '餐饮',
          costmoney: 1500 * 36,
          duration: 36,
          startDate: '2024-08-01',
          belong: '-',
        }, {
          name: '话费&宽带',
          costmoney: (100 + 19 + 19) * 36,
          duration: 36,
          startDate: '2024-08-01',
          belong: '-',
        }, {
          name: '水费&电费&燃气费',
          costmoney: 100 * 24,
          duration: 24,
          startDate: '2024-08-01',
          belong: '-',
        }, {
          name: '物业费',
          costmoney: 429 * 36,
          duration: 36,
          startDate: '2024-08-01',
          belong: '-',
        }, {
          name: '汽车保险',
          costmoney: 400 * 36,
          duration: 36,
          startDate: '2024-08-01',
          belong: '-',
        }, {
          name: '房贷',
          costmoney: 6000 * 36,
          duration: 36,
          startDate: '2024-08-01',
          belong: '-',
        }, {
          name: '油费',
          costmoney: 800 * 36,
          duration: 36,
          startDate: '2024-08-01',
          belong: '-',
        }, {
          name: '每年礼物',
          costmoney: (10000 / 12) * 36,
          duration: 36,
          startDate: '2024-08-01',
          belong: '-',
        }, {
          name: '循环大件更新',
          costmoney: (10000 / 12) * 36,
          duration: 36,
          startDate: '2024-08-01',
          belong: '-',
        }, {
          name: '会员',
          costmoney: (10000 / 12) * 36,
          duration: 36,
          startDate: '2024-08-01',
          belong: '-',
        },],
      Origin_listData: [ // 账单
        {
          name: '工商银行额外',
          costmoney: 315,
          duration: 1,
          startDate: '2024-01-25',
          belong: '工商银行',
        }, {
          name: 'iphone 14 pro 128g',
          costmoney: 7999,
          duration: 24,
          startDate: '2022-10-25',
          belong: '工商银行',
        }, {
          name: 'ipad pro M2 12.9`inch 128g ',
          costmoney: 9299,
          duration: 24,
          startDate: '2022-10-02',
          belong: '招商银行',
        }, {
          name: '极简置物架x2',
          costmoney: 1052,
          duration: 6,
          startDate: '2023-11-02',
          belong: '招商银行',
        },
        // {
        // 	name: '房租',
        // 	costmoney: 1830 * 24,
        // 	duration: 24,
        // 	startDate: '2024-09-07',
        // 	belong: '-',
        // },
        // {
        //   name: '水电',
        //   costmoney: 50 * 24,
        //   duration: 100,
        //   startDate: '2024-03-07',
        //   belong: '-',
        // }, {
        //   name: '融合宽带+话费+流量卡',
        //   costmoney: (100 + 20 + 20) * 36,
        //   duration: 36,
        //   startDate: '2022-11-01',
        //   belong: '-',
        // }, 
        {
          name: '餐饮',
          costmoney: 1500 * 100,
          duration: 100,
          startDate: '2022-11-01',
          belong: '-',
        }, {
          name: 'Switch王国之泪限定版',
          costmoney: 2168,
          duration: 12,
          startDate: '2023-07-12',
          belong: '建设银行',
        },
        {
          name: 'ROG白夜魔雪舞白轴',
          costmoney: 1779,
          duration: 6,
          startDate: '2024-09-12',
          belong: '建设银行',
        },
        {
          name: 'Apple TV 7 128g',
          costmoney: 1146,
          duration: 6,
          startDate: '2024-07-12',
          belong: '建设银行',
        },
        {
          name: '雷蛇V3pro鼠标',
          costmoney: 891,
          duration: 12,
          startDate: '2023-06-08',
          belong: '花呗',
        }, {
          name: '噬魂金蝎V2pro键盘',
          costmoney: 1044,
          duration: 12,
          startDate: '2023-08-08',
          belong: '花呗',
        }, {
          name: 'Nuphy键帽+掌托',
          costmoney: 215,
          duration: 12,
          startDate: '2023-01-08',
          belong: '花呗',
        }, {
          name: 'Nuphy Air 60 V2',
          costmoney: 604,
          duration: 6,
          startDate: '2024-01-02',
          belong: '招商银行',
        }, {
          name: '华为free耳机',
          costmoney: 450,
          duration: 3,
          startDate: '2023-12-08',
          belong: '花呗',
        }, {
          name: 'tomtoc NS包',
          costmoney: 108,
          duration: 3,
          startDate: '2023-11-08',
          belong: '花呗',
        }, {
          name: '博德之门筛子',
          costmoney: 68,
          duration: 3,
          startDate: '2023-11-08',
          belong: '花呗',
        }, {
          name: '同福客栈积木',
          costmoney: 439,
          duration: 3,
          startDate: '2024-02-08',
          belong: '花呗',
        }, {
          name: 'Nuphy air 96',
          costmoney: 719,
          duration: 6,
          startDate: '2024-02-06',
          belong: '京东白条',
        }, {
          name: '山力士1500pro露营灯',
          costmoney: 256,
          duration: 12,
          startDate: '2024-06-06',
          belong: '京东白条',
        }, {
          name: 'tomtoc通勤旅游包',
          costmoney: 349,
          duration: 6,
          startDate: '2024-09-06',
          belong: '京东白条',
        }, {
          name: '华硕850W装弹手电源',
          costmoney: 1094,
          duration: 6,
          startDate: '2023-08-06',
          belong: '京东白条',
        }, {
          name: 'P41 海力士 2t',
          costmoney: 818,
          duration: 6,
          startDate: '2023-12-06',
          belong: '京东白条',
        }, {
          name: 'RTX4060 七彩虹 OC',
          costmoney: 2500,
          duration: 3,
          startDate: '2023-08-06',
          belong: '京东白条',
        }, {
          name: 'Airpods Pro 2代雷电',
          costmoney: 1523,
          duration: 12,
          startDate: '2023-08-12',
          belong: '建设银行',
        }, {
          name: '中兴巡天ATX3000',
          costmoney: 258,
          duration: 3,
          startDate: '2024-02-06',
          belong: '建设银行',
        },
        {
          name: '工资',
          costmoney: -((6422) * 100),
          duration: 100,
          startDate: '2022-11-25',
          belong: '-',
        },
        {
          name: '小荷包',
          costmoney: (2500 * 100),
          duration: 100,
          startDate: '2022-11-25',
          belong: '-',
        },
        {
          name: '索泰 4070ti',
          costmoney: 5841,
          duration: 3,
          startDate: '2023-12-02',
          belong: '招商银行',
        },
        {
          name: '磁吸铰链卡包',
          costmoney: 146,
          duration: 3,
          startDate: '2024-02-08',
          belong: '花呗',
        },
        {
          name: '歌德利人体工程学椅',
          costmoney: 363,
          duration: 3,
          startDate: '2024-04-08',
          belong: '花呗',
        },
        // {
        // 	name: 'ROG 幻14air2024 4060',
        // 	costmoney: 538*24,
        // 	duration: 24,
        // 	startDate: '2024-07-08',
        // 	belong: '花呗',
        // },
      ],
      list: [],
      draw_hy: false,
      draw_zfbt: false,
      draw_payList: false,
      draw_card: false,
      compareWithLastMonth: false,
      myMoney: {
        xhb: 39688 + 20000 + 19298, // 小荷包
        zfgjj: 5776.66 + 478, // 住房公积金
        yb: 0, // 医保账户
        card: 0, // 储蓄卡余额
        paypal: 700, // 支付宝
        weichat: 0, // 微信
        cash: 0, // 现金
        fixed: [{
          name: '邮储银行冻结',
          value: 1249
        }, {
          name: '建设银行额外支出',
          value: -(8602)
        }, {
          name: `
          住房补贴+
          ns王国之泪限定+
          ns喷射战士限定+
          XboxSeriesX+
          手柄pro+
          手柄joy+
          SteamDeckOled+
          压岁钱+
          老婆1313+521红包+
          刘名川利息
          `,
          value: 3000 + 1450 + 1350 + 2200 + 200 + 200 + 3500 + 1500
        },]
      },
      timeValue: '',
      pickerOptions: { // 计算时间参考系快捷选项
        shortcuts: [{
          text: '今天',
          onClick (picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick (picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }]
      },
      tableData_zfbt: [{
        startTime: '2022-12',
        endTime: '2022-07',
        status: '已到账',
        money: 4000,
        submitFormDate: '',
        getMoneyDate: '2023-12-21',
      },
      {
        startTime: '2023-08',
        status: '已申请',
        money: 0,
        submitFormDate: '',
        getMoneyDate: '',
      },
      {
        startTime: '2023-09',
        status: '已到账',
        money: 500,
        submitFormDate: '',
        getMoneyDate: '2024-02-01',
      },
      {
        startTime: '2023-10',
        status: '已到账',
        money: 500,
        submitFormDate: '',
        getMoneyDate: '2024-04-29',
      },
      {
        startTime: '2023-11',
        status: '已到账',
        money: 500,
        submitFormDate: '',
        getMoneyDate: '',
      },
      {
        startTime: '2023-12',
        status: '已到账',
        money: 500,
        submitFormDate: '',
        getMoneyDate: '',
      },
      {
        startTime: '2024-01',
        status: '已申请',
        money: 0,
        submitFormDate: '',
        getMoneyDate: '',
      },
      {
        startTime: '2024-02',
        status: '已申请',
        money: 0,
        submitFormDate: '',
        getMoneyDate: '',
      },
      {
        startTime: '2024-03',
        status: '已申请',
        money: 0,
        submitFormDate: '',
        getMoneyDate: '',
      },
      {
        startTime: '2024-04',
        status: '已申请',
        money: 0,
        submitFormDate: '',
        getMoneyDate: '',
      },
      {
        startTime: '2024-05',
        status: '已申请',
        money: 0,
        submitFormDate: '',
        getMoneyDate: '',
      },
      {
        startTime: '2024-06',
        status: '已申请',
        money: 0,
        submitFormDate: '',
        getMoneyDate: '',
      }, {
        startTime: '2024-07',
        endTime: '2024-12',
        status: '已申请',
        money: 3000,
        submitFormDate: '',
        getMoneyDate: '',
      },

      ]
    };
  }
}
</script>

<style scoped>
.each_issue_hover:hover {
  font-weight: 600;
}

.flex_marginLeftAuto {
  margin-left: auto;
}

/* 
	.icon_hover:hover~.icon_svg {
		background-color: #52422D;
	} */
.icon_svg {
  position: absolute;
  top: 9px;
  right: 7px;
  cursor: pointer;
  display: none;
}

.icon_svg:hover {
  color: rgb(255, 29, 29) !important;
}

.icon_hover:hover .icon_svg {
  display: block !important;
  color: rgb(240, 0, 0);
}

.ccccccBox {
  border: 1px solid #cccccc;
  border-radius: 4px;
  width: 130px;
  margin-right: 8px;
  padding: 8px 8px 0 8px;
  margin-bottom: 8px;
  box-sizing: border-box;
  height: 67px;
}

.ccccccBox div:first-child {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 5px;
}

.ccccccBox div:last-child {
  font-size: 20px;
}

.buttonStyle {
  cursor: pointer;
  transition: 0.3s;
  /* 按下时下沉速度 */
}

/* 按钮按下缩放效果 */
.buttonStyle:active {
  position: relative;
  top: 1px;
  transform: scale(0.99, 0.99);
  -webkit-transform: scale(0.99, 0.99);
  -o-transform: scale(0.99, 0.99);
  -ms-transform: scale(0.99, 0.99);
}

.parent {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  height: 100%;
  width: 100%;
}

.parent > div {
  display: flex;
  padding-left: 10px;
}

.div1 {
  grid-area: 1 / 1 / 2 / 2;
}

.div2 {
  grid-area: 2 / 1 / 3 / 2;
}

.div3 {
  grid-area: 3 / 1 / 4 / 2;
}

.div4 {
  grid-area: 1 / 2 / 2 / 3;
}

.div5 {
  grid-area: 2 / 2 / 3 / 3;
}

.div6 {
  grid-area: 3 / 2 / 4 / 3;
}

::v-deep .el-dialog__title {
  font-weight: 600;
  color: #63656b;
}

::v-deep .el-calendar {
  border-radius: 10px;
  /* 生效 */
}

::v-deep .el-calendar__body {
  padding: 0;
}

::v-deep .el-calendar__header {
  padding: 8px;
}

::v-deep .el-calendar-table .el-calendar-day {
  /* width: 200px; */
  height: 93px;
  padding: 6px 5px 0 5px !important;
  margin: 0 !important;
  /* margin-top: 0px; */
}

::v-deep .el-calendar-table th {
  padding: 8px;
}

/* styling of Input */
.input {
  color: black;
  font-size: 20px;
  width: 100%;
  box-sizing: border-box;
  border: none;
}

.input_word {
  color: black;
  width: 85%;
  box-sizing: border-box;
  border: none;
  font-size: 14px;
  font-weight: 600;
}

/* Hover on Input */
input:hover {
  background: #4985e01f;
}

input:focus {
  outline: none;
}

input:focus ~ .input-border {
  width: 100%;
}

.redStyle {
  /* 控制计算日期显示到日历 */
  color: green;
}
</style>